<template>
  <q-dialog v-model="pop" persistent>
    <q-card style="width: 400px">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{title}}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section>
        <div class="flex justify-center">
          <qrcode
            :title="codeTitle"
            :subTitle="codeSubTitle"
            :code="url"
          />
        </div>

        <div class="text-center">另存为二维码图片后发送<br>或<br>复制以下地址到剪贴板直接发送</div>

        <div>
          <q-input dense class="col-xs-12 col-sm-6 col-md-4" filled v-model="url" readonly>
            <template v-slot:after>
              <q-btn dense label="复制" color="positive" @click="toClipboard" />
              <q-btn dense label="电子邮件" color="secondary" @click="sendEmail" v-if="email" v-close-popup />
            </template>
          </q-input>
        </div>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn label="关闭" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { defineComponent } from 'vue';
import qrcode from 'components/QrCode.vue';
import { copyToClipboard } from 'quasar';

export default defineComponent({
  components: {
    qrcode
  },
  emits: ['email'],
  props: {
    title: String,
    codeTitle: String,
    codeSubTitle: String,
    url: String,
    email: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      pop: false
    }
  },
  mounted () {

  },
  methods: {
    show () {
      this.pop = true;
    },
    hide () {
      this.pop = false;
    },
    toClipboard () {
      /* function copyToClipboard (textToCopy) {
        // navigator clipboard 需要https等安全上下文
        if (navigator.clipboard && window.isSecureContext) {
          // navigator clipboard 向剪贴板写文本
          return navigator.clipboard.writeText(textToCopy);
        } else {
          // 创建text area
          const textArea = document.createElement('textarea');
          textArea.value = textToCopy;
          // 使text area不在viewport，同时设置不可见
          textArea.style.position = 'absolute';
          textArea.style.opacity = 0;
          textArea.style.left = '-999999px';
          textArea.style.top = '-999999px';
          document.body.appendChild(textArea);
          textArea.focus();
          textArea.select();
          return new Promise((resolve, reject) => {
            // 执行复制命令并移除文本框
            document.execCommand('copy') ? resolve() : reject();
            textArea.remove();
          });
        }
      } */

      copyToClipboard(this.url)
        .then(() => {
          this.$q.notify({
            message: '成功复制到剪贴板',
            color: 'secondary',
            icon: 'done',
            position: 'center',
            timeout: 2000
          });
        })
        .catch(() => {
          this.$q.notify({
            message: '复制到剪贴板失败',
            color: 'negative',
            icon: 'error',
            position: 'center',
            timeout: 2000
          });
        });
    },
    sendEmail () {
      this.$emit('email', this.url);
    }
  }
});
</script>
